﻿<template>
    <div class="page-main Regulator">
        <DataTable ref="RegulatorDataTableRef" :data="list" :hasAdd="true && !isSelect" :has-filter="false" :has-search="false" :page-index="pageInfo.pageIndex" :page-size="pageInfo.pageSize" :total-count="pageInfo.totalCount" @page-change="onPageChange" @search-filter="onSearchFilter" @clear-filter="onClearFilter" @show-detail="onShowDetail" v-bind="$attrs">
            <vxe-column title="编码" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.code || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="名称" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.name || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="负责人" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.leaderName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="电话" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.leaderPhone || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="启用/禁用" min-width="120" show-overflow>
                <template #default="{ row }">
                    <span :class="Enums.Delete_Status.Get(row.isDelete).color">{{ Enums.Delete_Status.Get(row.isDelete).text }}</span>
                </template>
            </vxe-column>

            <vxe-column title="创建时间" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ Gx.YMD(row.createDate) }}
                </template>
            </vxe-column>

            <vxe-column title="操作" width="380" v-if="!isSelect">
                <template #default="{ row }">
                    <el-button :disabled="row.isDelete" type="primary" @click="onShowDetail(row)">编辑</el-button>
                    <el-button :disabled="row.isDelete" type="warning" @click="onShowDataPermission(row)">数据权限</el-button>
                    <el-button :disabled="row.isDelete" type="warning" @click="onShowPermission(row)">功能权限</el-button>
                    <el-button :disabled="row.isDelete" type="primary" @click="onShowRegulatorUser(row)">用户管理</el-button>
                </template>
            </vxe-column>

            <!-- 在添加按钮后面的搜索条件 -->
            <template #otherFilter></template>

            <!-- 在搜索按钮后面的按钮 -->
            <template #otherBtn></template>

            <!-- 顶部右侧按钮 -->
            <template #rightBtn v-if="!isSelect">
                <el-button-group>
                    <el-button v-if="true" type="primary" @click="onUnDel">启用</el-button>
                    <el-button v-if="true" type="danger" @click="onDel">禁用</el-button>
                </el-button-group>
            </template>

            <!-- 高级搜索内容 -->
            <template #Advfilter>
                <!-- <el-form v-model="filterModel" label-position="top" @submit.prevent></el-form> -->
            </template>
        </DataTable>

        <!-- 监管部门详情 -->
        <RegulatorDetail ref="RegulatorDetailRef" v-if="isShowDetail" @close="onCloseDetail"></RegulatorDetail>

        <DataPermissionSetting ref="DataPermissionSettingRef" v-if="isShowDataPermission" @close="isShowDataPermission = false"></DataPermissionSetting>

        <PermissionSetting ref="PermissionSettingRef" v-if="isShowPermission" @close="isShowPermission = false"></PermissionSetting>

        <RegulatorUser ref="RegulatorUserRef" v-if="isShowRegulatorUser" @close="isShowRegulatorUser = false"></RegulatorUser>
    </div>
</template>

<script lang="ts" setup>
import Enums from "@/gx/Enums";
import Gx from "@/gx/Gx";
import { TipsType } from "@/_gx/TsEnums";
import RegulatorDetail from "./RegulatorDetail.vue";
import DataPermissionSetting from "./DataPermissionSetting.vue";
import PermissionSetting from "./PermissionSetting.vue";
import RegulatorUser from "../RegulatorUser/RegulatorUser.vue";

/********************************************** 接收参数 **********************************************/

const props = defineProps({
    //是否为选择组件，在此组件用做弹框选择的子组件时传true
    isSelect: {
        type: Boolean,
        default: false,
    },

    //默认搜索条件，如果是多选的话可以增加已选数据的过滤
    defaultFilter: {
        type: Object,
        default: {},
    },
});

/********************************************** 列表相关定义 **********************************************/

//表格的数据
const list = ref([]);

//分页信息
const pageInfo = reactive({
    pageIndex: 1,
    pageSize: 20,
    totalCount: 0,
    orderBy: "[Regulator].[RegulatorID] DESC",
});

//搜索条件
const filterModel = ref<any>({});

//搜索条件空对象的json字符串，用于清空搜索条件时使用
const filterModelJson = Gx.SerializeObject(filterModel.value);

//DataTable对象，使用此对象来调用DataTable组件中抛出的属性或方法
const RegulatorDataTableRef = ref(null);

/********************************************** 列表方法与事件 **********************************************/

//页面加载
onMounted(() => {
    Init();
});

//初始化
const Init = () => {
    GetPage();
};

//分页方法
const GetPage = () => {
    let _data = {};

    MergeObjs(_data, filterModel.value, props.defaultFilter);

    App.CallApi(Api.Regulator.GetPage(pageInfo.pageIndex, pageInfo.pageSize, pageInfo.orderBy), {
        data: _data,
        success: (res: any) => {
            list.value = res.items;
            pageInfo.totalCount = res.totalCount;

            //在这里抛出一个事件，用来处理当此组件用于选择弹框时数据回显的选中功能
            emits("setSelectData");
        },
    });
};

//分页改变
const onPageChange = (data: any) => {
    pageInfo.pageIndex = data.currentPage;
    pageInfo.pageSize = data.pageSize;
    GetPage();
};

//高级搜索点击搜索按钮
const onSearchFilter = () => {
    pageInfo.pageIndex = 1;
    GetPage();
};

//高级搜索点击清空按钮
const onClearFilter = () => {
    filterModel.value = Gx.DeserializeObject(filterModelJson);
    pageInfo.pageIndex = 1;
    GetPage();
};

/********************************************** 列表按钮功能 **********************************************/

//禁用
const onDel = () => {
    let _ids: [] = RegulatorDataTableRef.value.GetSelectProp();
    if (Gx.IsEmpty(_ids) || _ids.length == 0) {
        App.Tips({ msg: "请在下方的表格中选择相应的数据！" });
        return;
    }

    App.Confirm({
        msg: "确定要禁用选择的数据？",
        type: TipsType.Warning,
        onOk: () => {
            App.CallApi(Api.Regulator.BatchDel, {
                data: _ids,
                success: (res: any) => {
                    App.Tips({ type: TipsType.Success, msg: "操作成功！" });
                    GetPage();
                },
            });
        },
    });
};

//启用
const onUnDel = () => {
    let _ids: [] = RegulatorDataTableRef.value.GetSelectProp();
    if (Gx.IsEmpty(_ids) || _ids.length == 0) {
        App.Tips({ msg: "请在下方的表格中选择相应的数据！" });
        return;
    }

    App.Confirm({
        msg: "确定要启用选择的数据？",
        type: TipsType.Warning,
        onOk: () => {
            App.CallApi(Api.Regulator.BatchUnDel, {
                data: _ids,
                success: (res: any) => {
                    App.Tips({ type: TipsType.Success, msg: "操作成功！" });
                    GetPage();
                },
            });
        },
    });
};

/********************************************** 详情页相关 **********************************************/

//是否显示详情对话框
const isShowDetail = ref(false);
//详情对话框Ref对象
const RegulatorDetailRef = ref(null);
//向子组件传值
const rowAutoID = ref<number | null>(null);
provide("rowAutoID", rowAutoID);

//显示详情
const onShowDetail = (row) => {
    isShowDetail.value = true;
    rowAutoID.value = row?.autoID;
    nextTick(() => {
        RegulatorDetailRef.value.Init();
    });
};

//关闭详情
const onCloseDetail = (isRefresh: boolean) => {
    if (isRefresh) {
        GetPage();
    }

    isShowDetail.value = false;
};

/********************************************** 数据权限 **********************************************/

const isShowDataPermission = ref(false);
const DataPermissionSettingRef = ref(null);

const onShowDataPermission = (row) => {
    isShowDataPermission.value = true;
    rowAutoID.value = row?.autoID;
    nextTick(() => {
        DataPermissionSettingRef.value.Init();
    });
};

/********************************************** 功能权限 **********************************************/

const isShowPermission = ref(false);

const PermissionSettingRef = ref(null);

const onShowPermission = (row) => {
    isShowPermission.value = true;
    rowAutoID.value = row?.autoID;
    nextTick(() => {
        PermissionSettingRef.value.Init();
    });
};

/********************************************** 用户管理 **********************************************/
const isShowRegulatorUser = ref(false);
const RegulatorUserRef = ref(null);

const onShowRegulatorUser = (row) => {
    isShowRegulatorUser.value = true;
    rowAutoID.value = row?.autoID;
    nextTick(() => {
        RegulatorUserRef.value.Init();
    });
};

//向上抛出的事件与方法
const emits = defineEmits(["setSelectData"]);
defineExpose({ RegulatorDataTableRef });
</script>
